<template>
<div class="detail" :class="{'fixed-box': isFixed}">
  <div class="detail-nav container">
    <div class="left">
      <span class="product-name title">{{name}}</span
      ><span class="hr"></span> <span class="product-name">小米8</span
      ><span class="hr"></span>
      <span class="product-name">小米8</span>
    </div>
    <div class="right">
      <span class="des">概述</span><span class="hr"></span>
      <span class="para">参数</span><span class="hr"></span>
      <span class="eva">用户评价</span>
      <slot></slot>
    </div>
  </div>
</div>
</template>

<script>
export default {
    name: 'DetailNav',
    props: ['name'],
    data(){
      return{
        isFixed: false,
        oldid: ''
      }
    },
    methods: {
      setFixed(){
        let scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
        this.isFixed = scrollTop > 152 ? true : false;
      }
    },
    mounted(){
      window.addEventListener('scroll',this.setFixed)
    }
};
</script>

<style lang="scss">
.detail-nav {
  font-family: PingFang SC;
  font-weight: bold;
  height: 71px;
  display: flex;
  justify-content: space-between;
  color: #666666;
  font-size: 12px;
  line-height: 70px;
  span {
    cursor: pointer;
  }
  .title {
    font-size: 18px;
    color: #333333;
    line-height: 70px;
  }
  button {
    width: 110px;
    height: 30px;
  }
}
.fixed-box{
  width: 100%;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 20px 10px rgba(153, 153, 153, 0.8);
  background: #fff;

}
</style>